import { Col, ConfigProvider, Flex, Layout, Row } from 'antd';
import { createStyles } from 'antd-style';

import { StartLabel, StatusLabel } from './components/Labels';
import { StartButton } from './components/StartButton/StartButton.tsx';

import type { LoadState } from '../../types.ts';
import type { FC } from 'react';

interface IPageStartProps {
    handleClickConnect: () => void;
    loadState: LoadState;
}

const useStyles = createStyles(({ css }) => ({
    flexWrapper: css`
        min-height: 100vh;
        min-height: 100dvh;
    `,
}));

export const PageStart: FC<IPageStartProps> = ({ handleClickConnect, loadState }) => {
    const { styles, theme } = useStyles();

    return (
        <ConfigProvider
            theme={{
                components: {
                    Layout: {
                        bodyBg: theme.startPageBg,
                    },
                },
            }}
        >
            <Layout>
                <Row justify="center" align="middle">
                    <Col span={18}>
                        <Flex
                            vertical
                            justify="center"
                            align="center"
                            className={styles.flexWrapper}
                        >
                            <StartLabel />
                            <StartButton
                                onClick={handleClickConnect}
                                loadState={loadState}
                            />
                            <StatusLabel loadState={loadState}/>
                        </Flex>
                    </Col>
                </Row>
            </Layout>
        </ConfigProvider>
    );
};

